<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<meta name="viewport"
	content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="stylesheet" href="/common/css/monitor/index_monitor.css"
	type="text/css" media="screen" />
</head>
		
<body>
	<div>
		<div style="position: relative;background-color: #fff;color: yellowgreen;font-size: 22px;padding: 25px;   "><h1>项目列表</h1> <button id="createIndex" type="button" class="btn btn-w-m btn-white" style="color:#FFF;background-color: #1c84c6 !important;position: absolute;top: 66px;right: 66px;">编辑自定义首页</button><button class="btn btn-primary" type="button" id="outline"  style="color:#FFF;background-color: #1c84c6 !important;position: absolute;top: 66px;right: 266px;">导出服务器信息到Excel</button></div>
		<div class="case-content" id="projectList"></div>
	</div>
	<!-- End Panel Other -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/common/petecat.js"></script>
	<script src="/common/form.js"></script>
	<!-- HTML之间的传值 -->
	<script src="/js/jquery.params.js"></script>
	<script src="/js/plugins/layer-pc/layer.js"></script>
	<script src="/js/jquery.cookie.js"></script>
    <!-- 组件通用 -->
    <script src="/common/frame.js"></script>
    
    <script type="text/javascript">
		$(function(){
			//导出服务器信息到Execl
    		$("#outline").click(function(){
    			window.location.href=BASE_URL+'/base/project/outputAllServerInfo';
    		});
			
			//初始化项目列表
			initProjectInfo();
			$("#projectList").on("click",'.case-item',function(){
				var title = $(this).find("h3").text();
				fwqList = layer.open({
					type:2,
					title:title,
					shade: 0.8,
	                content: ['/monitor/index_server.html?proToken='+$(this).find('.hidTok').val()+'&projectId='+$(this).find('.id').val(), 'auto']
				});
				layer.full(fwqList);
			});
		
			$("#createIndex").click(function(){
				layer.open({
					type:2,
					title:"设计自定义首页",
					shade: 0.8,
					 area: ['80%', '95%'],
	                content: ['/monitor/custom_index.html', 'auto'], 
	                end: function(){ 
	                	location.reload();
	                }
				});
			});
			
        	
		});
	
	//初始化项目列表
	function initProjectInfo(){
		var req = {};
    	req['reqJSON'] = {
			type : 'get',
			url : BASE_URL+'/base/project/queryProjectByCustom'
    	};
    	req['successFn'] = function(respData){
    		if(respData.code == SUCCESS_CODE){
    			var peojectListHTML = projectAppendHtml(respData.data);
    			$("#projectList").html(peojectListHTML.toString());
			}else{
				layer.msg(respData.message,{icon: 2}); 
			}
    	};
    	ajaxRequest(req);
	}
		
	//拼接HTML到页面中
    function projectAppendHtml(projectList){
    	var sb = new StringBuffer();
    	$.each(projectList,function(index,item){
    		sb.append('<div class="case-item">'+
    				'			<input type="hidden" class="hidTok" value='+item.token+'>'+
    				'			<input type="hidden" class="id" value='+item.id+'>'+
    				'			<div class="ih-item circle effect1">'+
    		    	'				<div class="criter">'+
    		    	'					<div class="spinner"></div>'+
    		    	'					<div class="info">'+
    		    	'						<div class="info-back">'+
    		    	'							<h3>'+item.text+'</h3>'+
    		    	'							<p>服务器开机数：'+item.userServerCount+'台<br/>服务器总数量：'+item.serverTotal+'台 </p>'+
    		    	'						</div>'+
    		    	'					</div>'+
    		    	'				</div>'+
    		    	'			</div>'+
    		    	'</div>');
    	});
    	return sb;
    }
	//实例化StringBuffer
    function StringBuffer () {
    	  this._strings_ = new Array();
    }

    StringBuffer.prototype.append = function(str) {
    	  this._strings_.push(str);
    };

    StringBuffer.prototype.toString = function() {
    	  return this._strings_.join("");
    };
	</script>
</body>
</html>